<template>
	<view class="zone">
		<Header title="大掌柜"></Header>
		<image class="guize" @click="explain=true" src="http://image.qxgm.site/tdz/img/ceo/mg-01.png" mode="widthFix">
		</image>
		<view class="main">
			<view class="tre">
				<view class="yui">
					大掌柜是什么？
				</view>
				<image class="gang" src="http://image.qxgm.site/tdz/img/ceo/mg-02.png" mode="widthFix"></image>
				<view class="hjk">
					大掌柜是平台为了提高灵石流通而开发的用户认证体系，质押一定的灵石获得大掌柜身份
				</view>
			</view>
			<view class="sbox">
				<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<scroll-view scroll-y="true" @scrolltolower="scnextrecord" class="box">
					<view class="part" v-for="(item,index) in list" :key="index">
						<image class="header" :src="item.avatar" mode="widthFix"></image>
						<view class="word">
							<view class="p1">
								昵称:{{item.username}}
							</view>
							<view class="p2">
								<text class="sid">ID:{{item.invite_code}}</text>
								<view class="zhiya">
									质押:{{Math.floor(item.price)}}灵石
								</view>
							</view>
						</view>
						<view class="abbox">
							<p>{{item.name}}</p>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="contact" @click="openCont(item)">联系ta</u-button>
						</view>
					</view>
					<view class="empty" v-if="list.length==0">
						<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
						暂无数据
					</view>
					<view class="more" v-else>
						{{loadText}}
					</view>
				</scroll-view>
				<view class="fixedbox">
					<view class="fbox1">
						<view class="wode">
							我的
						</view>
						<view class="lainxx" @click="openway">
							联系方式
						</view>
					</view>
					<view class="hbxo">
						<image class="touxiang" :src="userinfo.avatar" mode="widthFix"></image>
						<view class="word">
							<view class="p1">
								昵称:{{userinfo.username}}
							</view>
							<view class="p2">
								<text class="sid">ID：{{userinfo.invite_code}}</text>
								<view class="weicgwei" v-if="false">
									未成为大掌柜
								</view>
								<view class="weicgwei" v-else>
									<text
										class="ss">{{userinfo.tag_id == 0 ? '不是' : userinfo.tag_id == 1 ? '初级' : userinfo.tag_id == 2 ? '中级' : userinfo.tag_id == 3 ? '超级' : userinfo.tag_id == 4 ? '顶级' : userinfo.tag_id == 5 ? '至尊' : ''}}大掌柜</text>
									<text>质押{{userinfo.tag_id == 0 ? '0' : userinfo.tag_id == 1 ? '50' : userinfo.tag_id == 2 ? '100' : userinfo.tag_id == 3 ? '500' : userinfo.tag_id == 4 ? '1000' : userinfo.tag_id == 5 ? '2000' : ''}}灵石</text>
								</view>
							</view>
						</view>
						<view class="cwbox">
							<view class="chengwei" @click="cwhuiyuan">
								{{userinfo.tag_id == 0 ? '成为大掌柜' : '升级大掌柜'}}
							</view>
							<!-- <text class="canclle" @click="cancelsuperbtn">取消大掌柜>></text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 联系ta -->
		<u-mask :show="contact">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>联系方式</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="spart">
								<text>微信</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="u_weixin" />
									<view class="scopy" @click="$p.copy(u_weixin)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="u_qq" />
									<view class="scopy" @click="$p.copy(u_qq)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ群</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="u_qq_group" />
									<view class="scopy" @click="$p.copy(u_qq_group)">
										复制
									</view>
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="contact=false">确认</u-button>
					</view>
				</view>
				<image class="m_close" @click="contact = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 联系方式 -->
		<u-mask :show="contact2">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>联系ta</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="spart">
								<text>微信</text>
								<view class="slink">
									<input type="text" v-model="weixin" />
								</view>
							</view>
							<view class="spart">
								<text>QQ</text>
								<view class="slink">
									<input type="text" v-model="qq" />
								</view>
							</view>
							<view class="spart">
								<text>QQ群</text>
								<view class="slink">
									<input type="text" v-model="qq_group" />
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="filling">确认填写</u-button>
					</view>
				</view>
				<image class="m_close" @click="contact2 = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 升级大掌柜 -->
		<u-mask :show="upgrad">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>升级大掌柜</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="u_box">
								当前：{{tag_id == 0 ? '不是' : tag_id == 1 ? '初级' : tag_id == 2 ? '中级' : tag_id == 3 ? '超级' : tag_id == 4 ? '顶级' : '至尊'}}大掌柜
							</view>
							<view class="link" v-for="(item,index) in shouxu" :key="index">
								<view class="u_word">
									<p class="up1">{{item.name}}</p>
									<p class="up2">手续费补贴:{{item.commission_subsidy}}%</p>
								</view>
                                <view class="u_word">
                                	<p class="up1">质押灵石:{{Math.floor(item.price)}}</p>
                                	<p class="up2">手续费:{{item.commission}}%</p>
                                </view>
								<view class="shengji" @click="upshengji(item)">
									升级
								</view>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="upgrad = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 成为/升级大掌柜 -->
		<u-mask :show="enhance">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>升级大掌柜</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2" v-if="stat>=1">
							您确认要质押<text class="t1">{{item.price}}灵石</text><br>
							升级<text class="t2">{{item.name}}大掌柜</text>吗？
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="againCofirm">立即升级</u-button>
						<view class="sendtip">
							当前灵石：{{userinfo.lingshi}}
						</view>
					</view>
				</view>
				<image class="m_close" @click="enhance = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>


		<!-- 规则说明 -->
		<u-mask :show="explain">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>规则说明</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="epxbox">
								<view class="exp1">
									大掌柜是平台为了提高灵石流通效率而开发的
									用户认证体系，质押一定数量的灵石给平台后
									获得大掌柜身份。如果被举报违约，核实无误
									后，将扣除灵石并取消大掌柜身份。
								</view>
								<view class="exp2">
									成为大掌柜的有效权益:
								</view>
								<image class="expimg" src="http://image.qxgm.site/tdz/img/ceo/mg-11.png"
									mode="widthFix"></image>

								<view class="exp3">
									温馨提示:
								</view>
								<view class="exp4">
									大玩家身份是平台基于用户质押金币而赋予大 玩家身份代表了一定信任度，但不代表100% 可信，请大家仔细别，避免被骗!
								</view>
							</view>


						</view>
					</view>
				</view>
				<image class="m_close" @click="explain = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				contact: false,
				explain: false,
				weixin: '',
				qq: '',
				qq_group: '',
				contact2: false,
				u_weixin: '',
				u_qq: '',
				u_qq_group: '',
				upgrad: false,
				shouxu: [],
				stat: 1,
				enhance: false,
				userinfo: uni.getStorageSync('userinfo'),
				tag_id: '',
				item: {},
				page: 1,
				max_page: '',
				loadText: '没有更多了',
			}
		},
		onShow() {
			this.getUserInfo();
		},
		onLoad() {
			
			this.ceouserlist()
		},
		methods: {
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
					this.tag_id = res.data.tag_id
					this.weixin = (res.data.wechat_num == '' || res.data.wechat_num == null) ? '暂无设置' : res.data
						.wechat_num
					this.qq = (res.data.qq_num == '' || res.data.qq_num == null) ? '暂无设置' : res.data.qq_num
					this.qq_group = (res.data.qq_group_num == '' || res.data.qq_group_num == null) ? '暂无设置' : res.data
						.qq_group_num
				}
			},
			//大掌柜列表
			async ceolist() {
				let res = await this.$http.index.ceolists()
				if (res.code == 1) {
					this.shouxu = res.data
                    this.upgrad = true
				} else {
					this.$u.toast(res.msg)
				}
			},
			//玩家列表
			async ceouserlist() {
				let res = await this.$http.index.userlist({
					page: this.page,
				})
				if (res.code == 1) {
					this.list = [...this.list, ...res.data.data]
					this.max_page = res.data.last_page
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
				} else {
					this.$u.toast(res.msg)
				}
			},
			scnextrecord() {
				if (this.page >= this.max_page) {
					this.loadText = '没有更多了'
					return;
				}
				this.loadText = '努力加载中';
				this.page = ++this.page;
				this.ceouserlist()
				setTimeout(() => {
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
					else this.loadText = '努力加载中';
				}, 500)
			},
			//取消大掌柜
			async cancelsuperbtn() {
				let res = await this.$http.index.cancelsuper()
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.list = []
					this.getUserInfo();
					this.ceouserlist()
				}
			},
			// 联系ta
			openCont(item) {
				this.u_weixin = item.wechat_num ? item.wechat_num : '暂无'
				this.u_qq = item.qq_num ? item.qq_num : '暂无'
				this.u_qq_group = item.qq_group_num ? item.qq_group_num : '暂无'
				this.contact = true
			},
			// 打开联系方式弹框
			openway() {
				this.contact2 = true
			},
			// 确认填写
			async filling() {
				let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
				if (reg.test(this.weixin)) {
					this.$u.toast('微信含有中文字符')
					return
				}

				if (this.weixin == '' || this.qq_group == '' || this.qq == '') {
					this.$u.toast('含有未填写字段')
					return
				}

				let res = await this.$http.index.profile({
					nickname: this.userinfo.nickname,
					wechat_num: this.weixin,
					qq_group_num: this.qq_group,
					qq_num: this.qq
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.getUserInfo();
					this.contact2 = false
				}
			},
			// 打开成为大掌柜弹框
			cwhuiyuan() {
                
                if(this.shouxu.length == 0){
                    this.ceolist()
                }else{
                    this.upgrad = true
                }
			},
			// 升级大掌柜
			upshengji(item) {
				this.stat = item.id
				if (this.stat > this.tag_id) {
					this.item = item
					this.enhance = true
				} else {
					this.$u.toast('请选择比自己高的等级')
				}
			},
			// 立即升级
			async againCofirm() {
				let res = await this.$http.index.upgradesuper({
					tag_id: this.item.id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.list = []
					this.getUserInfo();
					this.ceouserlist()
					this.enhance = false
					this.upgrad = false
				}

			}
		}
	}
</script>

<style lang="less">
	.zone {
		position: relative;
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	// #ifdef H5
	.guize {
		position: absolute;
		top: 14px;
		right: 13px;
		width: 60px;
		z-index: 999;
	}

	// #endif


	// #ifdef APP-PLUS
	.guize {
		position: absolute;
		top: 34px;
		right: 13px;
		width: 60px;
		z-index: 999;
	}

	// #endif


	.box {
		height: calc(100vh - 317px);
		overflow-y: scroll;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 15px 6px 0;
		box-sizing: border-box;
	}

	.sbox {
		width: 100%;
		position: relative;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.yun {
		position: absolute;
		top: -3%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.part {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		padding: 13px 9px 9px 9px;
		box-sizing: border-box;
		margin-bottom: 3px;
	}

	.header {
		width: 47px;
		border-radius: 50%;
		margin-right: 3px;
	}



	.yui {
		font-size: 18px;
		font-weight: normal;
		color: #FFFDE2;
		line-height: 24px;
		text-align: center;
	}

	.gang {
		display: block;
		margin: 4px auto 12px;
		width: 92%;
	}

	.hjk {
		font-size: 15px;
		font-weight: normal;
		color: #DFDAD4;
		line-height: 24px;
		margin-bottom: 20px;
		padding: 0 16px;
	}

	.word {
		flex: 1;
		width: 50%;

		.p1 {
			white-space: nowrap;
			/*不允许换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
			/*文本超出三点代替*/
			margin-bottom: 9px;
		}

		.p2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.zhiya {
			width: 60%;
			text-align: center;
			font-size: 12px;
			font-weight: normal;
			color: #FFF4D5;
			line-height: 20px;
			background: url(http://image.qxgm.site/tdz/img/ceo/mg-06.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.abbox {
		text-align: center;
		margin-left: 3%;

		p {
			font-size: 12px;
			font-weight: normal;
			color: #91536D;
			line-height: 12px;
			margin-bottom: 4px;
		}

		.contact {
			width: 75px;
			height: 33px;
			font-size: 14px;
			font-weight: normal;
			line-height: 33px;
			color: #fef7c8;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/huang.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.fixedbox {
		display: flex;
		flex-direction: column;
		background: url(http://image.qxgm.site/tdz/img/ceo/mg-08.png) no-repeat;
		background-size: 100% 100%;
		padding: 11px 0 0 0;

		.fbox1 {
			display: flex;
			align-items: center;
			padding-left: 6%;
		}

		.touxiang {
			width: 48px;
			border-radius: 50%;
			margin-right: 3px;
		}

		.wode {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			margin-right: 4%;
		}

		.lainxx {
			width: 75px;
			height: 25px;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 25px;
			text-shadow: 0 1px 1px #006599;
			background: url(http://image.qxgm.site/tdz/img/ceo/mg-05.png) no-repeat;
			background-size: 100% 100%;
		}

		.hbxo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 4px;
		}
	}

	.chengwei {
		width: 93px;
		height: 37px;
		font-size: 15px;
		font-weight: normal;
		line-height: 37px;
		color: #fef7c8;
		text-shadow: 0 1px 1px #CB6500;
		text-align: center;
		background: url(http://image.qxgm.site/tdz/img/public/huang.png) no-repeat;
		background-size: 100% 100%;
		margin-left: 1%;
	}

	.weicgwei {
		font-size: 12px;
		font-weight: normal;
		color: #6E3B09;
		line-height: 24px;
		zoom: 0.92;

		.ss {
			margin-right: 3px;
		}
	}

	.jihuop {
		padding: 0 9%;
	}

	.spart {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;

		text {
			width: 22%;
		}
	}

	.slink {
		width: 78%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #bcb8ba;
		padding: 0 6px 0 19px;
		height: 40px;

		input {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 24px;
		}

		.scopy {
			width: 49px;
			height: 28px;
			display: block;
			font-size: 12px;
			text-align: center;
			font-weight: normal;
			color: #f9e5b6;
			line-height: 28px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.u_box {
		font-size: 18px;
		font-weight: normal;
		color: #333333;
		line-height: 57px;
		height: 57px;
		text-align: center;
		background: linear-gradient(180deg, rgba(93, 69, 81, 0.2), rgba(183, 24, 102, 0.2));
		border-radius: 5px;
	}

	.link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/ceo/mg-04.png) no-repeat;
		background-size: 100% 100%;
		padding: 11px;
		margin-top: 3px;

		.up1 {
			font-size: 12px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-bottom: 9px;
		}

		.up2 {
			font-size: 12px;
			font-weight: normal;
			color: #725059;
			line-height: 12px;
		}

		.up3 {
			font-size: 12px;
			font-weight: normal;
			color: #725059;
			line-height: 24px;
		}

		.shengji {
			width: 58px;
			height: 33px;
			display: block;
			font-size: 13px;
			text-align: center;
			font-weight: normal;
			color: #f9e5b6;
			line-height: 33px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.cwbox {
		text-align: center;
	}

	.canclle {
		font-size: 12px;
		font-weight: normal;
		color: #91536D;
		text-shadow: 0 1px 1px #FDF1C5;
	}




	.jihuop2 {
		font-size: 16px;
		font-weight: normal;
		color: #50433A;
		line-height: 30px;
		padding: 0 19%;

		.t1 {
			color: #ED519F;
		}

		.t2 {
			color: #4587FF;
		}
	}

	.sendtip {
		text-align: center;
		margin-top: 10px;
	}

	.exp1 {
		font-weight: normal;
		font-size: 14px;
		color: #50433A;
		line-height: 19px;
	}

	.exp2 {
		font-weight: normal;
		font-size: 15px;
		color: #333333;
		line-height: 18px;
		margin-top: 20px;
	}

	.expimg {
		width: 100%;
		margin-top: 13px;
	}

	.exp3 {
		font-weight: normal;
		font-size: 15px;
		color: #333333;
		line-height: 18px;
		margin-top: 24px;
	}

	.exp4 {
		font-weight: normal;
		font-size: 14px;
		color: #50433A;
		line-height: 19px;
		margin-top: 12px;
	}
</style>